<template>
    <div id="app"> 
      <transition :name="transitionName">
      <router-view class="transitionBody"></router-view>
      </transition>
    </div>
</template>

<script>
   export default {
  name: 'App',
  watch:{
  $route(to,from){
    if(to.meta.index<from.meta.index){
    this.transitionName="transitionRight"
    }else{
    this.transitionName="transitionLeft"
    }
  }
  },
  data(){
  return{
   transitionName: 'transitionLeft',
  }
  }
}
</script>

<style>
.transitionBody{
 transition: all 0.4s ease-out;
}
.transitionLeft-enter,
.transitionRight-leave-active {
  -webkit-transform: translate(100%, 0);
  transform: translate(100%, 0);
}
.transitionLeft-leave-active,
.transitionRight-enter {
  -webkit-transform: translate(-100%, 0);
  transform: translate(-100%, 0);
}
.transitionLeft-enter-active,
.transitionRight-enter-active {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}
</style>